<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="../../fonts/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/public/head-foot.css"/>
    <link rel="stylesheet" type="text/css" href="self-info-common.css"/>
    <script src="../../js/mui.min.js"></script>
    <style type="text/css">
    	
    	.divide-line {width: 2px;height: 14px;display: inline-block;background: #fff;}
    	.other-row {margin-top: 5px;}
    	.inline-box {overflow: hidden;width: 70%;margin: 0 auto;}
    	.icon-font {background: #ccc;display: inline-block;width: 25px;height: 25px;border-radius: 50%;
					text-align: center;line-height: 25px;}
    	.erweima {width: 50%;border-right: 1px solid #fff;padding-right: 8px;}
    	.wexin {width: 50%;}
    	.text-info {height: 25px;display: inline-block;line-height: 25px;}
    	#edit {border-color: #39bf9e;color: #39bf9e;}
    	#edit span {padding-right: 5px;}
    	.title-info {width: 25%;}
    	.info-box {width: 75%;}
    </style>
</head>
<body>
	
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<a class="iconfont icon-daochueps mui-pull-right right-icon"></a>
		<h1 class="mui-title mui-text-left">个人主页</h1>
	</header>
	
	<footer class="mui-bar mui-bar-footer" >
		<button class="mui-btn mui-btn-outlined mui-btn-block" id="edit">
			<span class="iconfont icon-iconfontbianji"></span>编辑
		</button>
	</footer>
	
	<div class="mui-content">
		<div class="mui-scroll-wrapper">
			<div class="mui-scroll">
				
				<div class="head-info-wrap">
					<div class="head-info">
						<div class="head-img-row">
							<div class="head-img-box">
								<img class="choose-headimg" src="../../img/log/user-photo.png" width="100%"/>
							</div>
						</div>
						<div class="nickname-row">
							<span id="nickname">leexinqee</span>
						</div>
						<div class="worktype-row">
							<div class="properties mui-ellipsis">
								<span id="company">阿里</span>
								<span class="divide-line"></span>
								<span id="worktype">前端开发</span>
							</div>
						</div>
						<div class="other-row">
							<div class="inline-box">
								<div class="mui-pull-left erweima">
									<span class="iconfont icon-iconfonterweima icon-font"></span>
									<span class="text-info">二维码</span>
								</div>
								<div class="mui-pull-left wexin">
									<span class="mui-icon mui-icon mui-icon-weixin icon-font"></span>
									<span class="text-info">微信</span>
								</div>
							</div>
							
						</div>
					</div>
				</div>
				
				<div class="entry-info-wrap">
					<ul class="mui-table-view">
						<li class="mui-table-view-divider">联系方式</li>
						<li class="mui-table-view-cell">
							<div class="title-info mui-pull-left">同客号:</div>
							<div class="tongke-id-box info-box mui-pull-left">
								<span id="tongke-id">未设置</span>
							</div>
						</li>
						<li class="mui-table-view-cell">
							<div class="title-info mui-pull-left">手机:</div>
							<div id="cell-phone" class="info-box mui-pull-left">11223344556</div>
						</li>
						<li class="mui-table-view-cell">
							<div class="title-info mui-pull-left">地区:</div>
							<div id="area" class="info-box mui-pull-left">未设置</div>
						</li>
						<li class="mui-table-view-cell">
							<div class="title-info mui-pull-left">邮箱:</div>
							<div id="email" class="info-box mui-pull-left">未设置</div>
						</li>
						<li class="mui-table-view-divider">标签</li>
						<li class="mui-table-view-cell">
							<span class="label-tap">
								<span class="label">创业</span>
								<span class="mui-badge mui-badge-negative mui-badge-inverted">1</span>
							</span>
							<span class="label-tap">
								<span class="label">互联网</span>
								<span class="mui-badge mui-badge-negative mui-badge-inverted">1</span>
							</span>
							<span class="label-tap">
								<span class="label">科技</span>
								<span class="mui-badge mui-badge-negative mui-badge-inverted">1</span>
							</span>
						</li>
						<li class="mui-table-view-divider">活动记录</li>
						<li class="mui-table-view-cell">
							您还没有参加过活动
						</li>
						<li class="mui-table-view-divider">背景</li>
						<li class="mui-table-view-cell">
							您还没有添加背景信息
						</li>
						<li class="mui-table-view-divider">爱好</li>
						<li class="mui-table-view-cell">
							未设置
						</li>
					</ul>
				</div>
				
			</div>
		</div>
	</div>
	
	<!-- 选取图片 -->
	<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell" id="take-photo">
				<span>拍照</span>
			</li>
			<li class="mui-table-view-cell" id="choose-pic">
				<span>从相册中选取</span>
			</li>
		</ul>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<a href="#picture"><b>取消</b></a>
			</li>
		</ul>
	</div>
	
	<script src="../../js/libs/jquery.min.js"></script>
	<script src="../../js/utils/tools.js"></script>
    <script>
      	mui.init();
      	mui.plusReady(function(){
      		mui(".mui-scroll-wrapper").scroll();
      		
      		// 编辑
      		$("#edit").on("tap", function(){
      			openWindow("./edit-self-info.html");
      		})
      		
      		// 选取头像
      		$(".choose-headimg").on("tap", function(){
      			mui("#picture").popover("toggle");
      		})
      	})
    </script>
</body>
</html>